<template>
	<view>
		<view class="top">
			<image class="tiaozhuan" src="../../../static/images/ljh/jt.png" @click="returnButton()"></image>
			<view class="title">就近加油</view>
			<view class="sslan">
				<uni-search-bar bgColor="#fff" class="uni-mt-10" radius="100" placeholder="郑州市高新区" clearButton="none"
					cancelButton="none">
				</uni-search-bar>
				<view class="qhan" @click="qhms()">
					列表模式
				</view>
			</view>
		</view>
		<view class="content">
			<uni-card style="border-radius: 20rpx;">
				<map></map>
				<view class="jyzxx">
					<view class="jyzxxLeft">
						<view class="jyzName">
							中国石油加油站
						</view>
						<view class="jyzWz">
							山阳区人民路与解放路交叉口
						</view>
						<view class="mdxq">
							<image src="../../../static/images/ljh/i.png"></image>
							<view class="" @click="onClick()">
								门店详情>>
							</view>
						</view>
					</view>
					<view class="jyzxxRight">
						<image src="../../../static/images/ljh/qx.png"></image>
					</view>
				</view>
			</uni-card>
			<u-button type="primary" text="立即导航" class="tcdl"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			qhms() {
				uni.$u.route('/pages/ljh/refuelNearby/refuelNearby')
			},
			returnButton() {
				// uni.$u.route('/pages/index/index')
				uni.$u.route({
					url: '/pages/index/index',
					type: 'tab'
				})
			},
			onClick() {
				uni.$u.route('/pages/ljh/GasStationDetails/GasStationDetails')
			}
		}
	}
</script>

<style>
	.tiaozhuan {
		position: absolute;
		color: white;
		font-size: 50rpx;
		top: 50rpx;
		left: 20rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.tcdl {
		width: 80%;
		border-radius: 40rpx;
		margin-bottom: 40rpx;
	}

	.content {
		position: absolute;
		top: 280rpx;
	}

	map {
		height: 600rpx;
	}

	.jyzxxRight {
		margin-top: 55rpx;
		margin-left: 40rpx;
	}

	.jyzxx {
		display: flex;
	}

	.jyzxxRight image {
		width: 220rpx;
		height: 140rpx;
	}

	.mdxq {
		font-size: 26rpx;
		margin-top: 20rpx;
		height: 40rpx;
		line-height: 40rpx;
		color: blue;
		display: flex;
	}

	.jyzWz {
		font-size: 26rpx;
		margin-top: 20rpx;
	}

	.jyzName {
		font-size: 36rpx;
		font-weight: bolder;
		margin-top: 40rpx;
	}

	.mdxq image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.uni-mt-10 {
		margin-top: 0rpx;
		margin-left: 10rpx;
		width: 75%;
	}

	.sslan {
		display: flex;
	}

	.qhan {
		text-align: center;
		line-height: 100rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		font-size: 12rpx;
		color: white;
		background-color: blueviolet;
		box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
	}

	.top {
		width: 100%;
		height: 450rpx;

	}

	.title {
		width: 100%;
		color: white;
		text-align: center;
		padding: 50rpx 0rpx;
		font-size: 35rpx;
	}
</style>